<template>
  <div> 
    <HeaderNav :title="title" :showBack='true' :url='url' />
    <img src="../../assets/img/upgrade_img.jpg" class="top_img"/>
    
    <div class="userinfo_container">
      <img :src="userInfo.httpAvatar" class="userinfo_img"/>
      <div class="userinfo_right">
        <div class="userinfo_name">{{$t('m.msg.GRADE_NAME')}}：{{userInfo.name}}</div>
        <div>{{$t('m.msg.GRADE_TYPE')}}：
          <span v-if="userInfo.grade == 'blueDiamond'">{{$t('m.msg.GRADE_BLUEDIAMOND')}}&nbsp;&nbsp;{{$t('m.msg.GRADE_TIME')}}{{userInfo.vipDate}}</span>
          <span v-else-if="userInfo.grade == 'anCrown'">{{$t('m.msg.GRADE_AMCROWN')}}&nbsp;&nbsp;{{$t('m.msg.GRADE_TIME')}}{{userInfo.vipDate}}</span>
          <span v-else>{{$t('m.msg.GRADE_USER')}}</span>
          <!-- <div>期限{{userInfo.vipDate}}</div>
          <div v-if="userInfo.grade == 'blueDiamond' || userInfo.grade == 'anCrown'">期限{{userInfo.vipDate}}</div> -->
        </div>
      </div>
    </div>

    <div class="selectTitle">{{$t('m.msg.GRADE_SEL')}}</div>

    <div class="select_container" :key="index" v-for="(item,index) in anCrownList">
      <div class="select_cricle"  @click='selectVip(index,1)' :style="`${vipSel == index ?  'background-color: #2161A1': ''}`"></div>
      <div class="select_box"  @click='selectVip(index,1)' :style="`${vipSel == index ?  'border-color: #2161A1;color: #2161A1': ''}`">
        <div class="select_item">
          <van-icon name="gem-o" info="vip" :style="`${vipSel == index ? 'color: #2161A1': ''} `" size="30px" />
          <div>{{$t('m.msg.GRADE_BLUEDIAMOND')}}</div>
        </div>
        <div>
          {{item.price}}$/{{item.month}}{{$t('m.msg.MONTH')}}
          <div class='select_month'>
            <div class='select_add' @click.stop='addMonth(1)'>+</div>
            <div class='select_add' @click.stop='subtractMonth(1)'>-</div>
          </div>
        </div>
      </div>
    </div>
    <div class="select_container" :key="index" v-for="(item,index) in blueDiamondList">
      <div class="select_cricle"  @click='selectVip(index,2)' :style="`${vipSel2 == index ? 'background-color: #91A121' : ''}`"></div>
      <div class="select_box"  @click='selectVip(index,2)' :style="`${vipSel2 == index ? 'border-color: #91A121;color: #91A121' : ''}`">
        <div class="select_item">
          <van-icon name="bulb-o" info="vip" :style="`${vipSel2 == index ? 'color: #91A121': ''} `" size="30px" />
          <div>{{$t('m.msg.GRADE_AMCROWN')}}</div>
        </div>
        <div>
          {{item.price}}$/{{item.month}}{{$t('m.msg.MONTH')}}
          <div class='select_month'>
            <div class='select_add' @click.stop='addMonth(2)'>+</div>
            <div class='select_add' @click.stop='subtractMonth(2)'>-</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 充值方式 -->
    <div class='pay_container'>
      {{$t('m.msg.PAY')}}：
      <div class='pay' :style="`${paySel == 1 ? 'color: red;border-color: red;': ''} `" @click='selectPay(1)'>
        <van-icon name="after-sale" size="20px" :style="`${paySel == 1 ? 'color: red': ''} `"/>{{$t('m.msg.PAY_MONEY')}}
        </div>
      <div class='pay' :style="`${paySel == 2 ? 'color: red;border-color: red;': ''} `" @click='selectPay(2)'>
        <van-icon name="diamond-o" size="20px" :style="`${paySel == 2 ? 'color: red': ''} `"/>{{$t('m.msg.PAY_DIAMOND')}}
        </div>
    </div>
    <div class='btn' @click='pay'>{{$t('m.msg.PAY_BTN')}}</div>
  </div>
</template>

<script>
import {
    Toast,
    Icon
  } from 'vant';
import HeaderNav from '@/components/HeaderNav.vue'
import {setUser, getUser} from '@/api/session';
import {postQuery2,postQuery, getQuery} from '@/api/query';
export default {
  name: 'Upgrade',
  components: {
    [Toast.name]: Toast,
    [Icon.name]: Icon,
    HeaderNav
  },
  data(){
    return {
      vipPrice: {},
      vipSel: 0,//当前选择的vip
      vipSel2: -1,
      month1: 1,
      month2: 1,
      paySel: 0,
      memberId: null,
      url: '/mine',
      title: this.$i18n.t('m.headernav.UPGRADE2'),
      anCrownList:[],
      blueDiamondList:[]
      // vipInit: {}//储存初始值
    }
  },
  methods: {
    //支付
    pay(){

      let that = this;
      that.$toast.loading({
        duration: 0,
        forbidClick: true,
        mask: true,
        message: "加载中..."
      });
      if(that.paySel == 0){
        that.$toast.fail(that.$i18n.t('m.msg.MSG43'));
        return
      }
      let vipSel = 0;
      if(that.vipSel == -1 && that.vipSel2 == -1){
        that.$toast.fail(that.$i18n.t('m.msg.MSG43'));
        return
      }else{
        if(that.vipSel != -1){
          vipSel = that.anCrownList[that.vipSel].id
        }else{
          vipSel = that.blueDiamondList[that.vipSel2].id
        }
      }
      let url = that.paySel == 1 ? '/member/recharge/vip': '/member/recharge/vip/gold';
      let data = {
        vipSetMealId: vipSel
      }
      if(that.memberId){
        data.memberId = that.memberId
      }
      postQuery2(url, data)
          .then (res => {
            that.$toast.clear(); // 关闭加载
            if(res.code == 200){
              console.log(res);
              //现金充值
              if(that.paySel == 1){
                if(res.data.isInside){
                  that.$toast.success(that.$i18n.t('m.msg.MSG44'));
                }else{
                  window.location.href = res.data.url;
                }
              }else{
                that.$toast.success(that.$i18n.t('m.msg.PAY_SUCCESS'));
              }
            }else{
              that.$toast.fail(res.msg);
            }
        })
    },
    //选择月份
    addMonth(index){
      let that = this;
      if(that.vipSel != index){
        return
      }
      if(that.vipSel == 1 && that.month1 < 12){
        that.month1 ++;
      }
      if(that.vipSel == 2 && that.month2 < 12){
        that.month2 ++;
      }
      that.getVipMoney();
    },
    subtractMonth(index){
      let that = this;
      if(that.vipSel != index){
        return
      }
      if(that.vipSel == 1 && that.month1 > 1){
        that.month1 --;
      }
      if(that.vipSel == 2 && that.month2 > 1){
        that.month2 --;
      }
      that.getVipMoney();
    },
    //选择vip
    selectVip(val,type){
      let that = this;
      let index = val;
      if(type == 1){
        that.vipSel = index;
        that.vipSel2 = -1;
      }else{
        that.vipSel2 = index;
        that.vipSel = -1;
      }
      // if(that.vipSel != val){
      //   that.vipSel = val;
      //   // that.month1 = 1;
      //   // that.month2 = 1;
      //   // that.getVipData();
      //   // that.vipPrice = that.vipInit
      //   // console.log(that.vipPrice)
      // }
    },
    //选择支付方式
    selectPay(val){
      this.paySel = val;
    },
    //根据月份获取单价
    getVipMoney(){
      let that = this;
      let params = {}
      params.vipType = that.vipSel == 1 ? 'blueDiamond' : 'anCrown';
      params.monthNum = that.vipSel == 1 ? that.month1 : that.month2;
      getQuery('/member/recharge/vip/setMeal', params)
          .then (res => {
            if(res.code == 200){
              console.log(res);
              that.vipSel == 1
                ? that.vipPrice.blueDiamond = res.data 
                : that.vipPrice.anCrown = res.data;
            }else{
              that.$toast.fail(res.msg);
            }
        })
    
    },
    //获取会员价格
    getVipData(){
      let that = this;
      getQuery('/member/recharge/vip/setMeal')
          .then (res => {
            if(res.code == 200){
              console.log(res);
              that.anCrownList = res.data.blueDiamond;
              that.blueDiamondList = res.data.anCrown;
              // that.vipPrice = res.data;
              // const val = { ...that.vipPrice }
              // console.log(val)
              // that.vipInit = { ...that.vipPrice }
            }else{
              that.$toast.fail(res.msg);
            }
        })
    }
  },
  created(){
    let that = this;
    //为他人升级
    that.memberId = that.$route.query.memberId;
    if(that.memberId){
      that.title = this.$i18n.t('m.headernav.UPGRADE3')
      that.url = `/userInfo?type=2&id=${+that.memberId}`
    }else{
      that.title = this.$i18n.t('m.headernav.UPGRADE2')
      that.url = '/mine'
    }
    //type
    let type = that.$route.query.type;
    if(type){
      if(type == 1){
        that.$toast.success(that.$i18n.t('m.msg.PAY_SUCCESS'));
        // setUser(null, 3); //支付回调完成更新缓存数据
        getQuery('/member/info')
        .then (res => {
            if(res.code == 200){
                console.log('user:',res)
                let user = res.data;
                that.userInfo = user;
                user.cookie = getUser().cookie;
                VueCookies.set(USER_KEY, user);
            }else{
                that.$toast.fail(res.msg);
                that.userInfo = getUser();
            }
        })
      }else{
        that.$toast.fail(that.$i18n.t('m.msg.PAY_FAIL'));
        that.userInfo = getUser();
      }
    }else{
      that.userInfo = getUser();
    }
    
    
    that.getVipData();
  }
}
</script>
<style scoped>
  .top_img{
    height: 30vh;
    width: 100vw;
    margin-top: 20px;
  }

  .userinfo_container{
    background-color: white;
    width: 100vw;
    display: flex;
    font-size: 18px;
    color: #a1a1a1;
    /* border-bottom: 20px #F5F5F5 solid; */
    padding: 30px 0px;
  }

  .userinfo_img{
    margin-left: 20px;
    height: 100px;
    width: 100px;
  }

  .userinfo_right{
    margin-left: 30px;
  }
  .userinfo_name{
    margin-top: 10px;
    height: 60px;
    font-size: 28px;
  }

  .selectTitle{
    height: 80px;
    line-height: 80px;
    width: 94vw;
    background-color: #F5F5F5;
    font-size: 28px;
    padding-left: 6vw;
    color: #946694;
  }

  .select_container{
    height: 12vh;
    display: flex;
    align-items: center;
    padding-top: 30px;
    background-color: white;

  }
  
  .select_box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 77vw;
    height: 150px;
    border-radius: 10px;
    border: 3px #a1a1a1 solid;
    padding: 0 3vw 0 4vw;
    margin-left: 4vw;
    color: #a1a1a1;
  }

  .select_item{
    display: flex;
    width: 200px;
    justify-content: space-between;
    align-items: center;
    font-size: 28px;
    
  }

  .select_cricle{
    height: 30px;
    width: 30px;
    border-radius: 50%;
    border: 3px #a1a1a1 solid;
    position: relative;
    left: 6.5vw;
    background-color: white;
  }

  .select_month{
    display: flex;
    position: relative;
    top: 20px;
    justify-content: space-between;
    width: 110px;
  }

  .select_add{
    width: 40px;
    height: 20px;
    font-size: 10px;
    border-radius: 3px;
    border: 2px #a1a1a1 solid;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    width: 100vw;
    font-size: 27px;
    background-color: #01D2FF;
    color: white;
    /* border-bottom: 5vh white solid; */
  }

  .pay{
    width: 140px;
    height: 60px;
    border-radius: 6px;
    border: 2px #a1a1a1 solid;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a1a1a1;
  }

  .pay_container{
    display: flex;
    background-color: white;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 60vw;
    padding: 20px 33vw 2vh 7vw;
    
  }

</style>
